<template>
  <div ref="pieChart" class="group-pie-chart"></div>
</template>
<script lang="ts">
export default {
  name: 'GroupPieChart'
};
</script>
<script lang="ts" setup>
import { ref, watch, defineProps, onMounted } from 'vue';
import { useECharts } from '@/hooks/useECharts';
const pieChart = ref();

interface GroupBarChartProps {
  pieData: any[];
}
const props = defineProps<GroupBarChartProps>();

const { setOptions } = useECharts(pieChart);

// 年碳排放趋势 Echart
const renderPieEchart = () => {
  let option: any = {
    color: [
      '#35BD9B',
      '#2B9496',
      '#7CA6AC',
      '#E7EDED',
      '#B4D9E9',
      '#6FB1CB',
      '#CDCDE6',
      '#8888BD',
      '#C1D0A7',
      '#E4D9AB'
    ],
    grid: {
      // top: 160
    },
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        return `${params.data.name}: ${params.data.value}(${params.data.totalEmissionRate}%)`;
      }
    },
    legend: {
      width: '78%',
      bottom: 16,
      padding: [5, 32],
      type: 'scroll',
      itemGap: 20,
      pageIcons: {
        horizontal: [
          'image://',
          'image://'
        ]
      },
      pageIconColor: '#435970' //图例分页左右箭头图标颜色
    },
    series: [
      {
        type: 'pie',
        radius: ['43%', '65%'],
        center: ['50%', '43%'], // 饼图上下左右位置
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false
          // formatter: (params: any) => {
          //   return `${params.data.totalEmissionRate}%`;
          // },
          // position: 'outside'
        },
        // emphasis: {
        //   label: {
        //     show: false,
        //     fontSize: 14,
        //     fontWeight: 'bold'
        //   }
        // },
        // labelLine: {
        //   show: false
        // },
        // data: [
        //   { value: 1048, name: '两江工厂' },
        //   { value: 735, name: '双福工厂' },
        //   { value: 580, name: '青凤工厂' },
        //   { value: 484, name: '十堰工厂' },
        //   { value: 300, name: '小康部品' },
        //   { value: 300, name: '11工厂' },
        //   { value: 300, name: '22工厂' },
        //   { value: 300, name: '33工厂' }
        // ]
        data: props.pieData
      }
    ]
  };
  return option;
};
function renderChart() {
  const option = renderPieEchart();
  setOptions(option);
}

onMounted(() => {
  renderChart();
});
watch(
  () => props.pieData,
  val => {
    if (val && pieChart.value) {
      renderChart();
    }
  }
);
</script>
<style lang="scss" scoped>
.group-pie-chart {
  width: 100%;
  height: calc(100% - 70px);
}
</style>
